<template>
	<view class="client-main">
		<view class="client-main__item"
			v-for="(item,index) in usersLists"
			:key="index"
			:data-index="index"
			@click="handleSelectClient">
			<view class="client-main__left">
				<view class="client-main__name">
					<text>{{item.name}}</text>
				</view>
				<view class="client-main__info">
					<text :class="['client-main__info-sex',{'male':item.sex == 1}]">{{item.sex == 1 ? '男':'女'}}</text>
					<text class="client-main__info-age">{{item.age}}周岁</text>
					<text class="client-main__info-mobile">{{item.mobile}}</text>
				</view>
			</view>
			<view class="client-main__right">
				<view v-if="isActSelect"
					class="btn select-btn">
					<text>选择</text>
				</view>
				<view v-else
					class="btn delete-btn">
					<text>删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getServiceUserLists
	} from '../../api'
	import {
		computed,
		ref,
		toRaw
	} from 'vue';

	const usersLists = ref([])
	const stateAct = ref('select')
	onLoad(async (ops) => {
		console.log(ops, '9090');
		if (ops.act == 'select') {
			uni.setNavigationBarTitle({
				title: '请选择服务对象'
			})
			stateAct.value = 'select'
		} else {
			uni.setNavigationBarTitle({
				title: '服务对象管理'
			})
			stateAct.value = 'del'
		}

		const result = await getServiceUserLists()
		usersLists.value = result.data.clients
	})

	const isActSelect = computed(() => {
		return stateAct.value == 'select'
	})

	const handleSelectClient = e => {
		console.log(e, 'xxxx');
		const {
			index
		} = e.currentTarget.dataset

		const clientsData = usersLists.value[index]
		uni.$emit('clientsChange', toRaw(clientsData))
		uni.navigateBack()
	}
</script>

<style lang="scss"
	scoped>
	page {
		background-color: #f4f4f4;
	}

	.client-main {
		padding: 20rpx;

		&__item {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0 40rpx;

			.client-main__name {
				font-weight: bold;
			}

			.client-main__info {
				display: flex;
				gap: 0 20rpx;

				&-sex {
					color: red;

					&.male {
						color: blue;
					}
				}

				&-age,
				.client-main__info-mobile {
					color: #999;
				}
			}

			.client-main__right {
				.btn {
					padding: 10rpx 20rpx;
					border: 1rpx solid green;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: green;
				}
			}
		}

	}
</style>